<template>
  <div style="width: 800px">
    <div>
      <el-button type="primary" @click="back()" style="margin-bottom: 20px;">返回</el-button>
      <el-button type="primary" @click="openAll()">全部展开</el-button>
      <el-button type="primary" plain @click="closeAll()">全部收起</el-button>
    </div>
    <el-form label-width="120px">
      <div v-for="(item, index) in questionTitleList" style="display: flex;margin-left: 50px;">
        <div style="margin-top: 10px;width: 10px;">{{index+1}}.</div>
        <div>
          <el-form-item label="题目:">
            {{item.questionTitle}}
            <el-button type="primary" plain @click="()=> item.open = !item.open ">{{item.open?'收起':'展开'}}</el-button>
          </el-form-item>
          <div v-show="item.open">
            <el-form-item label="题目类型:">
              {{item.questionType==1?'单选':'多选'}}
            </el-form-item>
            <el-form-item v-for="(itemChild, indexChild) in item.optionList" :label="opationChange[indexChild]+':'">
              <div :class="{colorRead:itemChild.isTrue}">{{itemChild.optionContent}}</div>
            </el-form-item>
            <el-form-item label="解析:">
              {{item.questionExplain}}
            </el-form-item>
          </div>
        </div>
      </div>
      <el-form-item label="出题顺序（不选按编辑顺序默认排序，可多选）:" label-width="320px" style="margin-left: 106px;">
        <span v-if="questionSore" style="margin: 0 10px;">打乱题目顺序</span>
        <span v-if="optionSore">打乱选项顺序</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>

</style>
<script>

  export default {
    data() {
      return {
        dataForm: {
          imgList: []
        },
        questionSore: false,
        optionSore: false,
        questionTitleList: [
          {
            optionList: [
              {
                isTrue: false,
                optionContent: "",
              }
            ],
            paperId: 0,
            questionExplain: "",
            questionTitle: "",
            questionType: 0,
            open: true,
          }
        ],
        questionData: {},
        opationChange:['选项A','选项B','选项C','选项D','选项E','选项F','选项G','选项H','选项I','选项J','选项K','选项L','选项M','选项N','选项O'],
        chapterId: '',
        bookId: '',
        id: ''
      }
    },
    methods: {
      init(bookId, id) {
        this.bookId = bookId
        this.chapterId = id
        let obj = {
          chapterId: id,
          bookId: bookId,
        }
        this.$http({
          url: this.$http.adornUrl(
            `/college/collegecoursepaper/list`
          ),
          method: 'get',
          params: this.$http.adornParams(obj)
        }).then(({data}) => {
          if (data && data.code === 0) {
            let questList = data.paperInfo.questionTitleList
            this.id = data.paperInfo.id
            questList.map((item, index)=> {
              questList[index].open = false
            })
            this.questionTitleList = questList
            switch(data.paperInfo.questionSort) {
              case 1:
                this.questionSore = false
                this.optionSore = false
                break;
              case 2:
                this.questionSore = true
                this.optionSore = false
                break;
              case 3:
                this.questionSore = false
                this.optionSore = true
                break;
              case 4:
                this.questionSore = true
                this.optionSore = true
                break;
              default:
                this.questionSore = false
                this.optionSore = false
            }
          }
          console.log(this.questionTitleList)
        })
      },
      openAll() {
        console.log(this.questionTitleList)
        this.questionTitleList.map((item, index)=> {
          this.questionTitleList[index].open = true
        })
      },
      closeAll() {
        this.questionTitleList.map((item, index)=> {
          this.questionTitleList[index].open = false
        })
      },
      back() {
        this.$emit("refresh", this.bookId);
      }
    }
  }
</script>
<style scoped>
  .colorRead {
    color: red;
  }
</style>
